<template>
    <div class="status-page" :style="{ color: color || '#2BA0C8' }">
        <div class="status-img">
            <slot></slot>
        </div>
        <span>{{ label }}</span>
        <span class="status-value">{{ showValue ? showValue : '~' }}</span>
        <span v-if="typeof showValue == 'number' || typeof showValue == 'boolean' || showValue != ''">{{ showUnit }}</span>
    </div>
</template>

<script>
export default {
    name: 'statusPar',
    props: {
        url: {
            type: String,
            default: ""
        },
        label: {
            type: String,
            default: ""
        },
        value: {},
        unit: {},
        color: {},
        long: {
            type: Number,
            default: 30
        }
    },
    computed: {
        showValue() {
            const value = this.value;
            if (typeof value == 'undefined' || !value) return ''
            if (value.length > this.long) {
                return value.slice(0, this.long) + "..."
            } else {
                return value
            }
        },
        showUnit() {
            const value = this.unit;
            if (typeof value == 'undefined' || !value) return ''
            if (value.length > 6) {
                return value.slice(0, 6) + "..."
            } else {
                return value
            }
        }
    },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.status-page {
    padding-left: 25px;
    height: 20px;
    line-height: 20px;
    position: relative;
    margin-right: 10px;
    flex: 1;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
}

.status-img {
    position: absolute;
    left: 0px;
    width: 20px;
    height: 20px;
}
</style>